<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script type="text/javascript" src="./echarts.min.js"></script>
    <script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
    <div id="main" style="width: 80%;height:400px;"></div>
    <script type="text/javascript">
        var colors = ['#a168a5','#7ff7de','#6bc05b','#ef9dc2','#a168a5','#db2365','#335d6f','#d4b453','#c0811b','#97e893','#b3cba1','#94ebac','#1e55cf','#121d02','#73c0ce','#a2d34b','#e26744','#1caec7','#e01cd5','#6167ff','#a7c520','#34d0e6','#fe372e','#083fdb','#bb8c86','#4e3ad4','#c3a5d2','#688e75','#882d7f','#421fb4','#66a346','#19d413','#bc9037','#51ba25','#c1c1a2','#ffbae1','#a63641','#3a801a','#0be816','#7e04e8','#2ebbfe','#22d94d','#d75baa','#a1baa6','#2d6145','#6d8644','#80465d','#335d6f','#0a47be','#1196a7']
        var myChart = echarts.init(document.getElementById('main'));


        
        $.getJSON ("./commits.json", function (data) {
            var itemStyle = {
                normal: {
                    opacity: 0.8,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            };
            var cdate = new Date()
            cdate.setDate(cdate.getDate() - 31)
            var xAxis_data_d = []
            for (var i = 0; i < 320; i++) {
                var date = new Date(cdate)
                date.setDate(cdate.getDate() + i/10)
                var d = date.getMonth() + 1 + '.' + date.getDate()
                xAxis_data_d[i] = d
            }

            var visualMap_max_d = 0
            var series_d = []
            var legend_data_d = []
            var color_d = []
            for (var i = 0; i < data.length; i++) {
                var obj = {
                    type: 'scatter',
                    itemStyle: itemStyle
                }
                obj['name'] = data[i].project
                obj['data'] = data[i].commits
                series_d[i] = obj
                color_d[i] = colors[i]
                legend_data_d[i] = data[i].project
                if (data[i].max_change > visualMap_max_d) {
                    visualMap_max_d = data[i].max_change
                }
            }
            visualMap_max_d = parseInt(visualMap_max_d/10 + 1) * 10

            var schema = [
                {name: 'date', index: 0, text: 'Date'},
                {name: 'change', index: 1, text: 'Changes'},
                {name: 'author', index: 2, text: 'Author'},
                {name: 'short_id', index: 3, text: 'Short_id'},
                {name: 'Time', index: 4, text: 'Time'}
            ];
            option = {
                backgroundColor: '#404a59',
                color: color_d,
                legend: {
                    y: 'top',
                    data: legend_data_d,
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                grid: {
                    x: '10%',
                    x2: 150,
                    y: '18%',
                    y2: '10%'
                },
                tooltip: {
                    padding: 10,
                    backgroundColor: '#222',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return '<span style="font-size: 12px;"><div style="border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px;margin-bottom: 2px">'
                            + obj.seriesName + '</div>'
                            + schema[1].text + '：' + value[1] + '<br>'
                            + schema[2].text + '：' + value[2] + '<br>'
                            + schema[3].text + '：' + value[3] + '<br>'
                            + schema[4].text + '：' + value[4] + '<br>'
                            + '</span>';
                    }
                },
                xAxis: {
                    type: 'category',
                    name: '日期',
                    nameGap: 1,
                    boundaryGap : false,
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                    min: 1,
                    max: 320,
                    splitLine: {
                        show: false
                    },
                    data : xAxis_data_d,
                    axisLine: {
                        lineStyle: {
                            color: '#eee'
                        }
                    },
                    axisLabel:{
		                 interval:19
		            }

                },
                yAxis: {
                    type: 'value',
                    name: '变更数',
                    nameLocation: 'end',
                    nameGap: 20,
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#eee'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                visualMap: [
                    {
                        left: 'right',
                        top: '10%',
                        dimension: 1,
                        min: 0,
                        max: visualMap_max_d,
                        itemWidth: 30,
                        itemHeight: 120,
                        calculable: true,
                        precision: 0.1,
                        text: ['大小：变更数'],
                        textGap: 30,
                        textStyle: {
                            color: '#fff'
                        },
                        inRange: {
                            symbolSize: [10, 70]
                        },
                        outOfRange: {
                            symbolSize: [20, 70],
                            color: ['rgba(255,255,255,.2)']
                        },
                        controller: {
                            inRange: {
                                color: ['#d4b453']
                            },
                            outOfRange: {
                                color: ['#d4b453']
                            }
                        }
                    }
                ],
                series: series_d
            };
            myChart.setOption(option);
        });  
    </script>
</body>
</html>